<template>
    <div>
        <h1>{{ msg }}---{{count }}</h1>
        <button @click="msg += '!'">更新</button>
        <button @click="count++">点击我修改数量</button>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const msg = ref('我爱你塞北的大雪');
const count = ref(1);
//watchEffect与watch区别?
//watch可以确定监听的数据源,watchEffect不能确定监听的数据源
//watch惰性监听,数据变化回调才会执行,watchEffect上来立即执行一次！！！
//watch可以知道新旧数值,但是watchEffect回调不会注入新旧数值！！！
watchEffect(() => {
    //回调当中你使用谁,谁就是监听的数据源,发生变化监听到！！！
    console.log(msg.value);
    console.log(count.value);
});
</script>

<style scoped></style>